<template>
  <div class="orders-page">
    <el-card>
      <template #header>
        <div class="page-header">
          <h2>我的订单</h2>
          <el-radio-group v-model="orderStatus" size="small">
            <el-radio-button label="all">全部</el-radio-button>
            <el-radio-button label="pending">待付款</el-radio-button>
            <el-radio-button label="processing">处理中</el-radio-button>
            <el-radio-button label="completed">已完成</el-radio-button>
          </el-radio-group>
        </div>
      </template>

      <div class="order-list">
        <el-card v-for="order in orders" :key="order.id" class="order-item">
          <div class="order-header">
            <span class="order-number">订单号：{{ order.orderNumber }}</span>
            <span class="order-date">{{ order.date }}</span>
            <span class="order-status">{{ getStatusText(order.status) }}</span>
          </div>
          
          <div class="order-products">
            <div v-for="product in order.products" :key="product.id" class="product-item">
              <img :src="product.image" class="product-image">
              <div class="product-info">
                <h4>{{ product.title }}</h4>
                <p class="product-price">¥{{ product.price }} × {{ product.quantity }}</p>
              </div>
            </div>
          </div>

          <div class="order-footer">
            <div class="order-total">
              总计：<span class="total-price">¥{{ order.total }}</span>
            </div>
            <div class="order-actions">
              <el-button type="primary" v-if="order.status === 'pending'">付款</el-button>
              <el-button v-if="order.status === 'completed'">查看详情</el-button>
              <el-button type="danger" plain v-if="order.status === 'completed'">删除订单</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'OrdersPage'
}
</script>

<script setup>
import { ref } from 'vue'

const orderStatus = ref('all')

const orders = ref([
  {
    id: 1,
    orderNumber: 'ORDER2024001',
    date: '2024-01-20',
    status: 'pending',
    total: 299,
    products: [
      {
        id: 1,
        title: '商品1',
        price: 99,
        quantity: 2,
        image: 'https://via.placeholder.com/100x100'
      }
      // ... 更多商品
    ]
  }
  // ... 更多订单
])

const getStatusText = (status) => {
  const statusMap = {
    pending: '待付款',
    processing: '处理中',
    completed: '已完成'
  }
  return statusMap[status] || status
}
</script>

<style scoped>
.orders-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-item {
  margin-bottom: 20px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.order-status {
  color: #ff6b6b;
}

.order-products {
  margin-bottom: 15px;
}

.product-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.product-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-right: 15px;
}

.product-info h4 {
  margin: 0 0 5px 0;
}

.product-price {
  color: #666;
  margin: 0;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.total-price {
  color: #ff6b6b;
  font-size: 18px;
  font-weight: bold;
}

.order-actions {
  display: flex;
  gap: 10px;
}
</style> 